<template>
	<view class="header">
		<u-navbar title="录入信息" :border-bottom="false"></u-navbar>
		<view class="content">
			<view class="img">
				<image :src="'https://files.yzsheng.com/goodimg/cartypeimg/' + swiperList.car_Type_Id + '.png'"></image>
			</view>
			<view class="right">
				<view class="right-title">
					{{swiperList.car_Type_Name}}{{swiperList.configuration_Name}}
				</view>
				<view class="right-price" v-if='swiperList.type !==1'>
					厂家指导价：<text v-show="swiperList.car_Price==='0.00'">暂无</text>
					<text v-show="swiperList.car_Price!=='0.00'">{{swiperList.car_Price | million}}</text>
				</view>
				<view class="right-price" v-else>
					厂家指导价：<text>{{swiperList.car_Price}}</text>
				</view>
			</view>

		</view>

		<!-- 选择配色 -->
		<view class="content2" v-if="swiperList.type !== 1">
			<view class="choose">
				<view class="line"></view>
				<view class="text">选择配色</view>
			</view>
			
			<view class="title">外观</view>
			<view class="choose-color">
				<view class="choose-color-main active" v-if="color.outerColour.length===0">
					<view class="flex flex-ai-c">
						<view class="color-frist" style="background: linear-gradient(0deg,rgba(255,49,49,1),rgba(255,243,52,1),rgba(37,191,255,1));"/>
						<view style="font-size: 26rpx;margin-left: 10rpx;">色全</view>
					</view>
				</view>
				<view v-else class="flex flex-wrap-w">
					<view class="choose-color-main" v-for="(item,index) in color.outerColour" @click="chooseColor(index,item)" :class="[{'active': isChoose === index}]" :key='index'>
						<view class="flex flex-ai-c">
							<view class="color-frist" :style="{background:item.colorCoding}" />
							<view style="font-size: 26rpx;margin-left: 10rpx;">{{item.color}}</view>
						</view>
					</view>
				</view>	
			</view>
			<view class="title">内饰</view>
			<view class="choose-color flex flex-wrap-w">
				<view class="choose-color-main active" v-if="color.inColour.length===0">
					<view class="flex flex-ai-c">
						<view class="color-frist" style="background: linear-gradient(0deg,rgba(255,49,49,1),rgba(255,243,52,1),rgba(37,191,255,1));"/>
						<view style="font-size: 26rpx;margin-left: 10rpx;">色全</view>
					</view>
				</view>
				<view v-else class="flex flex-wrap-w">
					<view class="choose-color-main" v-for="(item,index) in color.inColour" @click="chooseColors(index,item)" :class="[{'active': isChooseW === index}]" :key='index'>
						<view class="flex flex-ai-c">
							<view class="color-frist" :style="{background:item.colorCoding.split('/')[0]}" v-show="item.colorCoding.split('/').length===1" />
							<view class="color-frist" :style="{background:item.colorCoding.split('/')[0]}" v-show="item.colorCoding.split('/').length===2" />
							<view class="color-frist" :style="{background:item.colorCoding.split('/')[1]}" v-show="item.colorCoding.split('/').length===2" />
							<view style="font-size: 26rpx;margin-left: 10rpx;">{{item.color}}</view>
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
		<view class="content2" v-else>
			<view class="choose">
				<view class="line"></view>
				<view class="text">选择配色</view>
			</view>
			
			<view class="title">外观</view>
			<view class="choose-color flex flex-wrap-w">
				<view class="choose-color-main" v-for="(item,index) in color" @click="chooseColor(index,item)" :class="[{'active': isChoose === index}]" :key='index'>
					<view class="flex flex-ai-c">
						<view class="color-frist" :style="{background:item.outerColour.colorCoding}" />
						<view style="font-size: 26rpx;margin-left: 10rpx;">{{item.outerColour.color}}</view>
					</view>
				</view>
			</view>
			<view class="title">内饰</view>
			<view class="choose-color flex flex-wrap-w">
				<view class="choose-color-main" v-for="(item,index) in color" @click="chooseColors(index,item)" :class="[{'active': isChooseW === index}]" :key='index'>
					<view class="flex flex-ai-c">
						<view v-for="(item2,i) in item.inColour.neiColor">
							<view class="color-frist" :style="{background:item2}"/>
						</view>
						<view style="font-size: 26rpx;margin-left: 10rpx;">{{item.inColour.color}}</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 过往询价 -->
		<view class="content3">
			<view class="choose">
				<view class="line"></view>
				<view class="text">过往询价</view>
			</view>
			<view class="history">
				<!-- 落地总金额 -->
				<view class="history-totalPrice">
					<view class="history-totalPrice-one">
						<view class="history-totalPrice-left">落地总金额</view>
						<view class="history-totalPrice-right" type="number" style="font-size: 34rpx;">
							￥{{ parseFloat(c).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,') }}
						</view>
					</view>
					<view class="history-totalPrice-footer">落地价+必要花费+商业保险</view>
				</view>

				<!-- 裸车价 -->
				<view class="nakedCar">
					<view class="nakedCar-content">
						<view class="nakedCar-price">裸车价</view>
						<view class="nakedCar-icon">
							<u-input type="number" placeholder="请输入4S报价" input-align='right' v-model="list.carMoney" />
							<i-icon icon="iconxiugai3" size="26rpx"></i-icon>
						</view>
					</view>
				</view>

				<!-- 必要花费 -->
				<view class="need">
					<view class="need-spend" @click='down'><strong></strong>
						<view class="need-spend-price">
							<view class="flex flex-ai-c">
								<view>必要花费</view>
								<view style="color: #999999;font-size: 24rpx;margin-left: 20rpx;">购置税、交强险等</view>
							</view>
							<view class="flex flex-jc-fe">
								<view>￥{{parseFloat(d).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')}}</view>
								<view :class="['icon',downShow?'iconDown':'']" @click="down">
									<u-icon name="arrow-up-fill" size="16rpx"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view :class="['arrow','bottom-arrow',downShow?'active':'']">
						<view class="list">
							<view>
								<view>购置税</view>
								<view>￥{{list.purchaseTax}}</view>
							</view>
							<view>
								<view>交强险</view>
								<view>￥{{list.insuranceMoney}}</view>
							</view>
							<view>
								<view>车船使用税</view>
								<view>￥{{list.vehicleUseTax}}</view>
							</view>
							<view>
								<view>消费税</view>
								<view>￥{{list.consumptionTax}}</view>
							</view>
							<view>
								<view>综合服务费</view>
								<view class="flex flex-ai-c">
									<u-input v-model="list.serviceFee" type="number" placeholder="请输入价格" inputAlign="right"></u-input>
									<i-icon icon="iconxiugai3" size="26rpx"></i-icon>
								</view>
								
							</view>
						</view>
					</view>
				</view>

				<!-- 商业保险 -->
				<view class="nakedCar">
					<view class="nakedCar-content">
						<view class="nakedCar-price">商业保险</view>
						<view class="nakedCar-icon">
							<u-input type="number" placeholder="请输入价格" input-align='right' v-model="list.commercialInsurance" />
							<i-icon icon="iconxiugai3" size="26rpx"></i-icon>
						</view>
					</view>
				</view>

				<!-- 自定义名称 -->
				<view class="nakedCar" v-for="(item,i) in list.carFindOtherFeeList" :key='i'>
					<view class="nakedCar-content">
						<view class="nakedCar-price" style="color: #BBBBBB;">
							<u-input placeholder="请输入自定义名称" v-model="item.item_Description"></u-input>
						</view>
						<view class="nakedCar-icon">
							<input type="number" placeholder-style="color:#BBBBBB" :placeholder="placeholder" style="text-align: right;font-size: 28rpx;"
							 v-model="item.item_Fee"/>
							<i-icon icon="iconxiugai3" size="26rpx"></i-icon>
							<view style="margin-left: 10rpx;" :id="i" @click="del">
								<i-icon icon="iconshanchu" color="#666666"></i-icon>
							</view>
						
						</view>
					</view>
				</view>

				<!-- 添加自定义 -->
				<view class="custom" @click="addInput">
					<view class="flex flex-ai-c">
						<i-icon icon="icontianjia" size="38rpx"></i-icon>
						<text>添加自定义项</text>
					</view>
				</view>
			</view>
		</view>

		<view class="content4">
			<view class="chooses">
				<view class="lines"></view>
				<view class="texts">上户城市</view>
				<view class="city">
					<view @click="aaa">
						<text style="color: #989898;" v-show="!taddress.city">请选择省.市.区</text>
						<text style="color: #333333;" v-show="taddress.city">{{addList.province}} {{addList.city}}</text>
					</view>
					<u-picker mode="region" v-model="show" :params="params" @confirm="confirm"></u-picker>
					<view style="margin-left: 10rpx;">
						<u-icon name="arrow-right" color="#999999" size="20rpx"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 提交 -->
		<view class="footet-btn">
			<button @click="addCarFind">确认提交</button>
			<u-toast ref="uToast" />
		</view>
	
	</view>
</template>

<script src='./input_info.js'></script>

<style lang="scss" scoped>
	@import './input_info.scss';
</style>
